<template>
    <div>
        <div class="imageList"  v-if="dataList&&dataList.length>0">
            <template v-for="data in dataList">
                <slot :data="data"></slot>
            </template>
        </div>
        <el-empty description="暂无内容" :image-size="80" v-else></el-empty>
        <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.per_page"
                @pagination="getList"
        />
    </div>
</template>
<script>
    export default {
        name: "ImageTable",
        props: {
            apiUrl: {
                type: String,
                default: ""
            },
            apiFun: {
                type: String,
                default: "getList"
            },
            params:{
                type:Object,
                default:function () {
                    return {}
                }
            }
        },
        data() {
            return {
                dataList: [],
                total: 0,
                queryParams: {
                    per_page: 10,
                    page: 1,
                    search_value: ""
                },
                loading: false
            };
        },
        created() {
            this.queryParams = {...this.queryParams,...this.params};
            this.getList();
        },
        watch: {},
        methods: {
            searchList(keyword){
                this.queryParams.page = 1;
                this.getList(keyword)
            },
            getList(keyword) {
                console.log("apiFun",this.apiFun);
                const api = require(`@/api/${
                    this.apiUrl ? this.apiUrl : this.$route.fullPath.replace("/", "")
                }/index`);
                this.loading = true;
                if (keyword) {
                    if (typeof keyword == "string") {
                        this.queryParams.search_value = keyword;
                    } else if (typeof keyword == "object") {
                        this.queryParams = { ...this.queryParams, ...keyword };
                    }
                } else {
                    this.queryParams.search_value = "";
                }
                if (this.apiUrl && this.apiFun) {
                    //console.log("this.apiFun",this.apiFun)
                    if(this.$route.query.id){
                        api.default[this.apiFun](this.$route.query.id, this.queryParams).then(
                            res => {
                                this.getResult(res);
                            }
                        ).catch(()=>{
                            this.loading = false;
                        })
                    }else{
                        api.default[this.apiFun](this.queryParams).then(
                            res => {
                                this.getResult(res);
                            }
                        ).catch(()=>{
                            this.loading = false;
                        })
                    }
                } else {
                    api.default[this.apiFun](this.queryParams).then(res => {
                        this.getResult(res);
                    }).catch(()=>{
                        this.loading = false;
                    })
                }
            },
            getResult(res) {
                    if(res.data.value){
                        this.dataList = this.$attrs.formatter?this.$attrs.formatter(res.data.value):res.data.value;
                        this.total = res.data.total;
                    }else{
                        this.dataList = this.$attrs.formatter?this.$attrs.formatter(res.data):res.data;
                    }
                    this.$emit("loadComplete",res.data)
                this.loading = false;
            }
        }
    };
</script>
<style lang="scss" scoped>
    .imageList{
        position: relative;
    }
</style>
